import React, { Component } from 'react'
import './index.css';
export default class Main extends Component {
    render() {
        //接收 todos
        let {todos} = this.props;
        return (
            <ul className="todo-main">
                {
                    todos.map(item => {
                        return <li key={item.id}>
                            <label>
                                <input type="checkbox" checked={item.done} onChange={this.changeState(item.id)} />
                                <span>{item.title}</span>
                            </label>
                            <button 
                                className="btn btn-danger" 
                                style={{display: item.done ? 'block' : 'none'}}
                                onClick={this.delete(item.id)}
                            >删除</button>
                        </li>
                    })
                }

                {
                    todos.length === 0 && <li className="empty">暂无数据</li>
                }
            </ul>
        )
    }

    // 删除任务
    delete = (id) => {
        return () => {
            //执行任务删除
            this.props.removeTodo(id);
        }
    }

    //切换状态
    changeState = (id) => {
        return (e) => {
            // console.log(id, e.target.checked);
            //元素的下标
            this.props.checkTodo(id, e.target.checked);
        }
    }
}
